<template>
    <div class="comment-con">
        <van-nav-bar
        title="用户评价"
        left-text="返回"
        :fixed="true"
        left-arrow
        @click-left="onClickLeft"
        />
        <div class="zw"></div>
        <div class="content">
            <div class="comment_tit">
                <p class="comment_per">
                    好评率： {{praiseRate}}
                </p>
                <p class="comment_icon">
                    <span class="comment_all">全部({{cmtCount}})</span>
                    <span class="comment_jx">精选评价({{qualityReviewsCount}})</span>
                </p>
            </div>
            <CommentList
                :comment = "comment"
            ></CommentList>
        </div>
        
    </div>
</template>

<script>

import Vue from 'vue'
import axios from 'axios'

import CommentList from './commentsList'

export default {
    data(){
        return{
            comment:[],
            qualityReviewsCount:0,
            cmtCount:0,
            praiseRate:"0%"
        }
    },
    components :{
        CommentList
    },
    methods: {
        onClickLeft() {
        // Toast('返回');
        },
    },
    mounted(){
        axios.get('/comment',{
            params: {
                modelid: 1302915002,
                page_index: 1,
                page_size:20,
                type: 4
            }
        }).then(result=>{
            
            this.qualityReviewsCount = result.data.data.qualityReviewsCount
            this.cmtCount = result.data.data.cmtCount
            this.praiseRate = result.data.data.praiseRate
            this.comment = result.data.data.post
            // console.log(this.comment)
        })
    }
}
</script>

<style lang="stylus" scoped>
div
    .comment-con
        width 100%
        overflow scroll
        .zw
            width 100%
            height .88rem
        .content
            width 100%
            background-color #f5f5f5
            .comment_tit
                width 100%
                height 1.7rem
                padding .32rem .24rem
                background: #fff;
                .comment_per
                    width 100%
                    height .5rem
                    font-size: .28rem;
                    line-height: .28rem;
                    color: #333;
                .comment_icon
                    width 100%
                    height .56rem
                    .comment_all
                        display block
                        float left
                        margin-right: .16rem;
                        padding: 0 .2rem;
                        width 2rem
                        height: .56rem;
                        text-align center
                        line-height: .56rem;
                        background: #F5F5F5;
                        border-radius: .28rem;
                        font-size: .24rem;
                        color: #666;
                    .comment_jx
                        display block
                        float left
                        background: #7F4395;
                        color: #FFF;
                        margin-right: .16rem;
                        padding: 0 .2rem;
                        height: .56rem;
                        width 2.2rem
                        line-height: .56rem;
                        text-align center
                        border-radius: .28rem;
                        font-size: .24rem;

</style>